  import {reactive} from 'vue'
  //校验函数

  //校验用户名
  export const validateUsename = (rule, value, callback) => {
    //英文字母，字母，下划线或者横线3-16位
    let reg = /^[a-zA-Z0-9-_]{3,16}$/
    if(reg.test(value)){
        //验证通过
        callback()
    }else{
        callback(new Error('用户名必须由英文字母,字母,下划线或者横线3-16位'))
    }
  }
  //校验密码
  export const validatePassword = (rule, value, callback) => {
    if(value){
        callback()
    }else{
        callback(new Error('密码不能为空'))
    }
  }
  //校验验证码
  export const validateCaptcha = (rule, value, callback) => {
    if(value.length<5){
        callback(new Error('验证码不能小于5位'))
    }else{
        callback()
    }
  }

  //校验手机号
  export const validatePhone = (rule, value, callback) => {
   
    let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    if(reg.test(value)){
        //验证通过
        callback()
    }else{
        callback(new Error('请输入正确的手机号'))
    }
  }
    //校验手机验证码
    export const validateNumber = (rule, value, callback) => {
      if(value.length<5){
          callback(new Error('验证码不能小于5位'))
      }else{
          callback()
      }
    }

  //检验规则
  export const rules = reactive({
        username: [{ validator: validateUsename, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }],
        captcha: [{ validator: validateCaptcha, trigger: 'blur' }], 
    })
  //手机校验规则
  export const rulesV = reactive({
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  number: [{ validator: validateNumber, trigger: 'blur' }],
  
})

     
   //表单提交的时候
  /**
   * 
   * @param {Object} formEl 表单的引用
   * @param {Function} successCallback 表单校验通过的回调函数 
   * @param {Function} faildCallback 表单校验失败的回调函数
   */
  export const useSubmitForm =(successCallback,faildCallback) => (formEl) => {
    if (!formEl) return
    //调用了组件提供的校验的方法
    formEl.validate((valid) => {
        //如果所有的表单校验通过，valid就是true,不然就是false
      if (valid) {
        //登入请求可以在这里发送
        if(successCallback){
            successCallback()
        }
        // console.log('submit!')
      } else {
        if(faildCallback){
            faildCallback(false)
        }
        // console.log('error submit!')
        return false
      }
    })
  }  